<template>
  <!--顶部工具栏-->
  <div>
    <q-toolbar color="secondary" class="text-black shadow-1">
      <q-toolbar-title>工具栏</q-toolbar-title>
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-tuodong"
        :class="{ highlight: flag == 'move' }"
        title="拖动"
        @click="updateFlag('move')"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-xuanzhuan"
        :class="{ highlight: flag == 'rotate' }"
        title="旋转"
        @click="updateFlag('rotate')"
      />
      <q-separator vertical inset />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-chexiao"
        title="撤销"
        @click="undo"
        :disable="undoDisable"
        :class="{'text-disable':undoDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-zhongzuo"
        title="重做"
        @click="redo"
        :disable="redoDisable"
        :class="{'text-disable':redoDisable}"
      />
      <q-separator vertical inset />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-zuoduiqi"
        title="左对齐"
        @click="alignLeft"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-juzhongduiqi"
        title="居中对齐"
        @click="alignCenter"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-youduiqi"
        title="右对齐"
        @click="alignRight"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-dingduanduiqi"
        title="顶端对齐"
        @click="alignTop"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-zhongjianduiqi"
        title="中间对齐"
        @click="alignMiddle"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
      <q-btn
        flat
        round
        dense
        icon="iconfont icon-diduanduiqi"
        title="底端对齐"
        @click="alignBottom"
        :disable="alignBtnDisable"
        :class="{'text-disable':alignBtnDisable}"
      />
    </q-toolbar>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
export default {
  data () {
    return {
      changeArray: [],
      curOpratorIndex: 0, //当前操作索引
      oldConfigData: null
      // ljur: new LazyJsonUndoRedo(this.configData)
    };
  },
  computed: {
    ...mapState({
      selectedComponents: state => state.topoEditor.selectedComponents,
      selectedComponentMap: state => state.topoEditor.selectedComponentMap,
      configData: state => state.topoEditor.topoData,
      flag: state => state.topoEditor.curFlag,
      undoStack: state => state.topoEditor.undoStack,
      redoStack: state => state.topoEditor.redoStack
    }),
    // 撤销按钮禁用
    undoDisable () {
      return this.undoStack.length == 0;
    },
    // 重做按钮禁用
    redoDisable () {
      return this.redoStack.length == 0;
    },
    //对齐按钮禁用
    alignBtnDisable () {
      return this.selectedComponents.length < 2; //当所选择的组件少于2个时，禁用对齐按钮
    }
  },
  watch: {
    configData: {
      handler (newVal, oldVal) {
        if (this.flag == "" && oldVal) {
          // console.log('newVal, oldVal :', newVal, oldVal);
          this.oldConfigData = oldVal;
        }
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations("topoEditor", ["setTopoData", "setFlag", 'undo', 'redo']),
    updateFlag (flag) {
      this.setFlag(flag);
    },
    //左对齐：所有组件的x坐标设置为最小的那个
    alignLeft () {
      // console.log('this.selectedComponents :', this.selectedComponents, this.selectedComponentMap);
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        let values = Object.values(this.selectedComponentMap);
        // console.log('values :', values);
        var min = values.reduce(function (a, b) {
          return b.style.position.x > a.style.position.x ? a : b;
        });
        // console.log('min :', min);
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.x = min.style.position.x;
        }
      }
    },
    /**
     * 垂直居中对齐
     * 以第一个组件为参造物，进行居中对齐，获取中线位置，再用中线位置减去组件宽度的一半得到组件的x坐标
     */
    alignCenter () {
      // console.log('this.selectedComponents :', this.selectedComponents, this.selectedComponentMap);
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        let values = Object.values(this.selectedComponentMap);
        //获取中线位置
        let middleX =
          values[0].style.position.x + values[0].style.position.w / 2;
        // console.log('middleX :', middleX);
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.x = middleX - component.style.position.w / 2;
        }
      }
    },
    //右对齐
    alignRight () {
      // console.log('this.selectedComponents :', this.selectedComponents, this.selectedComponentMap);
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        // debugger;
        let values = Object.values(this.selectedComponentMap);
        // 组件的x+组件的宽度最大的值就是需要对齐的最右边x坐标值
        var max = values.reduce(function (a, b) {
          return b.style.position.x + parseFloat(b.style.position.w) >
            a.style.position.x + parseFloat(a.style.position.w)
            ? b
            : a;
        });
        // console.log('max :', max);
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.x =
            max.style.position.x +
            parseFloat(max.style.position.w) -
            parseFloat(component.style.position.w);
        }
      }
    },
    /**
     * 顶端对齐：y坐标按照最小的来对齐
     */
    alignTop () {
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        let values = Object.values(this.selectedComponentMap);
        // console.log('values :', values);
        var min = values.reduce(function (a, b) {
          return b.style.position.y > a.style.position.y ? a : b;
        });
        console.log("min :", min);
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.y = min.style.position.y;
        }
      }
    },
    /**
     * 水平中间对齐：以选中的第一个组件为参造物，让其它组件的y坐标和其一致
     */
    alignMiddle () {
      // console.log('this.selectedComponents :', this.selectedComponents, this.selectedComponentMap);
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        let values = Object.values(this.selectedComponentMap);
        let objY = values[0].style.position.y;
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.y = objY;
        }
      }
    },
    /**
     * 底端对齐：y坐标按照最大的来对齐
     */
    alignBottom () {
      //只有选中多项才执行
      if (this.selectedComponents.length > 1) {
        let values = Object.values(this.selectedComponentMap);
        // console.log('values :', values);
        var max = values.reduce(function (a, b) {
          return b.style.position.y > a.style.position.y ? b : a;
        });
        // console.log('max :', max);
        for (var key in this.selectedComponentMap) {
          var component = this.selectedComponentMap[key];
          component.style.position.y = max.style.position.y;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.q-toolbar {
  min-height: 40px;
  background: white;
}
.highlight {
  color: rgb(103, 203, 255);
}
</style>
